<template>
  <home-content :title="title">
    <el-tabs v-model="activeName" @tab-click="clickHandle">
      <el-tab-pane class="tabs_item" label="课程购买量统计" name="buy">
        <!-- v-if的目的是为了触发子组件的重绘 方便计算canvas的宽度和高度 -->
        <chart-area
          v-if="buyList.length > 0 && activeName == 'buy'"
          :x-data="buyDateList"
          :chart-data="buyList"
          :timepicker="true"
          :toolbox="true"
          @reset-time="resetTime"
          tipName="购买量"
        ></chart-area>
        <div class="table_container">
          <el-row justify="center">
            <el-col :span="12">时间</el-col>
            <el-col :span="12">访问量</el-col>
          </el-row>
          <el-row v-for="(item,index) in buyResultList" :key="index">
            <el-col class="table-item" :span="12">{{ item.day }}</el-col>
            <el-col class="table-item" :span="12">{{ item.buyNum }}</el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane class="tabs_item" label="课程访问量" name="visits">
        <chart-area
          v-if="visitsList.length > 0 && activeName == 'visits'"
          :x-data="visitsDateList"
          :chart-data="visitsList"
          :timepicker="true"
          :toolbox="true"
          @reset-time="resetTime"
          tipName="访问量"
        ></chart-area>
        <div class="table_container">
          <el-row justify="center">
            <el-col :span="12">时间</el-col>
            <el-col :span="12">访问量</el-col>
          </el-row>
          <el-row v-for="(item,index) in visitsResultList" :key="index">
            <el-col class="table-item" :span="12">{{ item.day }}</el-col>
            <el-col class="table-item" :span="12">{{ item.visitNum }}</el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </home-content>
</template>

<script>
import HomeContent from "@/components/HomeContent.vue";
import ChartArea from "@/components/ChartArea.vue";
import request from "@/utils/request";
import dayjs from "dayjs";
import { getBuyList, getVisiList } from "@/utils/getChartsData";
export default {
  name: "Buy",
  components: {
    "home-content": HomeContent,
    "chart-area": ChartArea
  },
  data() {
    return {
      title: "课程购买量",
      activeName: "buy",
      buyResultList: [],
      buyDateList: [],
      buyList: [],
      visitsResultList: [],
      visitsDateList: [],
      visitsList: [],
      startDate: null,
      endDate: null
    };
  },
  created() {
    this.activeName = this.$route.query.active || "buy";
    this.startDate = dayjs()
      .subtract(10, "day")
      .format("YYYY-MM-DD");
    this.endDate = dayjs().format("YYYY-MM-DD");
    this.initBList();
    this.initVList();
  },
  activated() {
    this.activeName = this.$route.query.active || "buy";
    window.scrollTo(0,0);
  },
  methods: {
    async initBList() {
      const result = await getBuyList({
        startDate: this.startDate,
        endDate: this.endDate
      });
      this.buyResultList = result.responseList;
      this.buyDateList = result.xlist;
      this.buyList = result.ylist;
    },
    async initVList() {
      const result = await getVisiList({
        startDate: this.startDate,
        endDate: this.endDate
      });
      this.visitsResultList = result.responseList;
      this.visitsDateList = result.xlist;
      this.visitsList = result.ylist;
    },
    clickHandle() {
      this.activeName == "buy"
        ? (this.title = "课程购买量")
        : (this.title = "课程访问量");
    },
    resetTime(date) {
      this.startDate = dayjs(date[0]).format("YYYY-MM-DD");
      this.endDate = dayjs(date[1]).format("YYYY-MM-DD");
      this.initVList();
      this.initBList();
    }
  }
};
</script>

<style lang='less' scoped>
.el-row {
  border-top: 1px solid #eee;
}
.el-col {
  text-align: center;
  background-color: #f2f2f2;
  line-height: 58px;
  font-size: 16px;
  color: #666666ff;
  &:nth-child(1) {
    border-right: 1px solid #e0e0e0;
  }
}
.table-item {
  font-size: 14px;
  background-color: #fff;
}
</style>